<template>
  <div class="common">
    <h4>公共脚本</h4>
    <el-form :model="form">
      <el-form-item label="">
        <el-select v-model="form.value" filterable placeholder="Select" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button size="small" @click="handleManage" :icon="Setting" text>
          管理公共脚本
        </el-button>
      </el-form-item>
    </el-form>
    <CommonScriptManage ref="CommonScriptManageRef" />
  </div>
</template>

<script setup lang="ts">
import { Setting } from '@element-plus/icons-vue'
import CommonScriptManage from '../../debug/dialog/prepost/CommonScriptManage.vue';
const CommonScriptManageRef = ref()
const form = reactive({
  value: ''
})
const options = ref([
  {
    label: 'a',
    value: 'a'
  }
])
/** 管理公共脚本，打开弹窗 */
const handleManage = () => {
  CommonScriptManageRef.value.open()
}
</script>

<style scoped>
.common {
  .el-select-dropdown__footer {
    text-align: center;
  }

  h4 {
    font-weight: 500;
  }
}
</style>
